import React from 'react';
import './Video.less';
import EventBus from '../../../utils/eventBus';
const audio = new Audio()
class Video extends React.Component {
  state = {
    url: '',
    status: 0
  }
  getUrl = (url) => {
    // ../../../mp3/tests/
    switch(url) {
      case 'welcome.mp3':
        audio.src = require('../../../mp3/tests/welcome.mp3')
        break;
      case '0-1':
        audio.src = require('../../../mp3/tests/0-1.mp3')
        break;
      case '0-2':
        audio.src = require('../../../mp3/tests/0-2.mp3')
        break;
      case '0-3':
        audio.src = require('../../../mp3/tests/0-3.mp3')
        break;
      case '0-4':
        audio.src = require('../../../mp3/tests/0-4.mp3')
        break;
      case '0-5':
        audio.src = require('../../../mp3/tests/0-5.mp3')
        break;
      case '0-6':
        audio.src = require('../../../mp3/tests/0-6.mp3')
        break;
      case '0-7':
        audio.src = require('../../../mp3/tests/0-7.mp3')
        break;
      case '0-8':
        audio.src = require('../../../mp3/tests/0-8.mp3')
        break;
      case '0-9':
        audio.src = require('../../../mp3/tests/0-9.mp3')
        break;
      case '0-10':
        audio.src = require('../../../mp3/tests/0-10.mp3')
        break;
      case '0-11':
        audio.src = require('../../../mp3/tests/0-11.mp3')
        break;
      case '0-12':
        audio.src = require('../../../mp3/tests/0-12.mp3')
        break;
      case '0-13':
        audio.src = require('../../../mp3/tests/0-13.mp3')
        break;
      case '0-14':
        audio.src = require('../../../mp3/tests/0-14.mp3')
        break;
      case '0-15':
        audio.src = require('../../../mp3/tests/0-15.mp3')
        break;
      case '0-16':
        audio.src = require('../../../mp3/tests/0-16.mp3')
        break;
      case '0-17':
        audio.src = require('../../../mp3/tests/0-17.mp3')
        break;
      case '0-18':
        audio.src = require('../../../mp3/tests/0-18.mp3')
        break;
      case '0-19':
        audio.src = require('../../../mp3/tests/0-19.mp3')
        break;
      case '0-20':
        audio.src = require('../../../mp3/tests/0-20.mp3')
        break;
      case '0-21':
        audio.src = require('../../../mp3/tests/0-21.mp3')
        break;
      case '0-22':
        audio.src = require('../../../mp3/tests/0-22.mp3')
        break;
      case '0-23':
        audio.src = require('../../../mp3/tests/0-23.mp3')
        break;
      case '0-24':
        audio.src = require('../../../mp3/tests/0-24.mp3')
        break;
      case '0-25':
        audio.src = require('../../../mp3/tests/0-25.mp3')
        break;
      case '0-26':
        audio.src = require('../../../mp3/tests/0-26.mp3')
        break;
      case '0-27':
        audio.src = require('../../../mp3/tests/0-27.mp3')
        break;
      case '0-28':
        audio.src = require('../../../mp3/tests/0-28.mp3')
        break;
      case '0-29':
        audio.src = require('../../../mp3/tests/0-29.mp3')
        break;
      case '0-30':
        audio.src = require('../../../mp3/tests/0-30.mp3')
        break;
      case '0-31':
        audio.src = require('../../../mp3/tests/0-31.mp3')
        break;
      case '0-32':
        audio.src = require('../../../mp3/tests/0-32.mp3')
        break;
      case '0-33':
        audio.src = require('../../../mp3/tests/0-33.mp3')
        break;
      case '0-loop':
        audio.src = require('../../../mp3/tests/0-loop.mp3')
        break;
      case '1-1':
        audio.src = require('../../../mp3/tests/1-1.mp3')
        break;
      case '1-2':
        audio.src = require('../../../mp3/tests/1-2.mp3')
        break;
      case '1-3':
        audio.src = require('../../../mp3/tests/1-3.mp3')
        break;
      case '1-4':
        audio.src = require('../../../mp3/tests/1-4.mp3')
        break;
      case '1-5':
        audio.src = require('../../../mp3/tests/1-5.mp3')
        break;
      case '1-6':
        audio.src = require('../../../mp3/tests/1-6.mp3')
        break;
      case '1-7':
        audio.src = require('../../../mp3/tests/1-7.mp3')
        break;
      case '1-8':
        audio.src = require('../../../mp3/tests/1-8.mp3')
        break;
      case '1-9':
        audio.src = require('../../../mp3/tests/1-9.mp3')
        break;
      case '1-10':
        audio.src = require('../../../mp3/tests/1-10.mp3')
        break;
      case '1-11':
        audio.src = require('../../../mp3/tests/1-11.mp3')
        break;
      case '1-12':
        audio.src = require('../../../mp3/tests/1-12.mp3')
        break;
      case '1-13':
        audio.src = require('../../../mp3/tests/1-13.mp3')
        break;
      case '1-14':
        audio.src = require('../../../mp3/tests/1-14.mp3')
        break;
      case '1-15':
        audio.src = require('../../../mp3/tests/1-15.mp3')
        break;
      case '1-16':
        audio.src = require('../../../mp3/tests/1-16.mp3')
        break;
      case '1-17':
        audio.src = require('../../../mp3/tests/1-17.mp3')
        break;
      case '1-18':
        audio.src = require('../../../mp3/tests/1-18.mp3')
        break;
      case '1-19':
        audio.src = require('../../../mp3/tests/1-19.mp3')
        break;
      case '1-20':
        audio.src = require('../../../mp3/tests/1-20.mp3')
        break;
      case '1-21':
        audio.src = require('../../../mp3/tests/1-21.mp3')
        break;
      case '1-22':
        audio.src = require('../../../mp3/tests/1-22.mp3')
        break;
      case '1-23':
        audio.src = require('../../../mp3/tests/1-23.mp3')
        break;
      case '1-24':
        audio.src = require('../../../mp3/tests/1-24.mp3')
        break;
      case '1-25':
        audio.src = require('../../../mp3/tests/1-25.mp3')
        break;
      case '1-26':
        audio.src = require('../../../mp3/tests/1-26.mp3')
        break;
      case '1-27':
        audio.src = require('../../../mp3/tests/1-27.mp3')
        break;
      case '1-28':
        audio.src = require('../../../mp3/tests/1-28.mp3')
        break;
      case '1-29':
        audio.src = require('../../../mp3/tests/1-29.mp3')
        break;
      case '1-30':
        audio.src = require('../../../mp3/tests/1-30.mp3')
        break;
      case '1-31':
        audio.src = require('../../../mp3/tests/1-31.mp3')
        break;
      case '1-loop':
        audio.src = require('../../../mp3/tests/1-loop.mp3')
        break;
      case '2-1':
        audio.src = require('../../../mp3/tests/2-1.mp3')
        break;
      case '2-2':
        audio.src = require('../../../mp3/tests/2-2.mp3')
        break;
      case '2-3':
        audio.src = require('../../../mp3/tests/2-3.mp3')
        break;
      case '2-4':
        audio.src = require('../../../mp3/tests/2-4.mp3')
        break;
      case '2-5':
        audio.src = require('../../../mp3/tests/2-5.mp3')
        break;
      case '2-6':
        audio.src = require('../../../mp3/tests/2-6.mp3')
        break;
      case '2-7':
        audio.src = require('../../../mp3/tests/2-7.mp3')
        break;
      case '2-8':
        audio.src = require('../../../mp3/tests/2-8.mp3')
        break;
      case '2-9':
        audio.src = require('../../../mp3/tests/2-9.mp3')
        break;
      case '2-10':
        audio.src = require('../../../mp3/tests/2-10.mp3')
        break;
      case '2-11':
        audio.src = require('../../../mp3/tests/2-11.mp3')
        break;
      case '2-12':
        audio.src = require('../../../mp3/tests/2-12.mp3')
        break;
      case '2-13':
        audio.src = require('../../../mp3/tests/2-13.mp3')
        break;
      case '2-14':
        audio.src = require('../../../mp3/tests/2-14.mp3')
        break;
      case '2-15':
        audio.src = require('../../../mp3/tests/2-15.mp3')
        break;
      case '2-16':
        audio.src = require('../../../mp3/tests/2-16.mp3')
        break;
      case '2-17':
        audio.src = require('../../../mp3/tests/2-17.mp3')
        break;
      case '2-18':
        audio.src = require('../../../mp3/tests/2-18.mp3')
        break;
      case '2-19':
        audio.src = require('../../../mp3/tests/2-19.mp3')
        break;
      case '2-loop':
        audio.src = require('../../../mp3/tests/2-loop.mp3')
        break;
      default:
        break;
    }
  }
  componentWillReceiveProps () {
    this.setState({status: 0})
    // const videoImg = document.getElementById('videoImg');
    // const type = this.props.type
    // if (type === '1') {
    //   videoImg.src=require('../../../images/tests/play2-normal.png')
    // } else {
    //   videoImg.src=require('../../../images/tests/play1-normal.png')
    // }
  }
  componentDidMount () {
    // 订阅事件
    EventBus.$on('stopAudio', () => {
      this.stopAudio()
    })
  }
  stopAudio = () => {
    if(!audio.ended){
      audio.pause();
    }
  }
  play1 = (e) => {
    e.preventDefault();
    if (this.state.status === 0) {
      this.stopAudio();
    }
    this.getUrl(this.props.url)
    let target = e.target || e.srcElement
    let that = this
    if (this.state.status === 0 || this.state.status === 2) {
      this.setState({
        status: 1
      })
      target.src=require('../../../images/tests/play1-animate1.png')
      setTimeout(()=>{
        target.src=require('../../../images/tests/play1-animate2.png')
      }, 500)
      setTimeout(()=>{
        target.src=require('../../../images/tests/play1-animate3.png')
      }, 1000)
      audio.play()
      audio.onended = function() {
        that.setState({
          status: 0
        })
        target.src=require('../../../images/tests/play1-normal.png')
      };
    } else if (this.state.status === 1) {
      this.setState({
        status: 2
      })
      target.src=require('../../../images/tests/pause1-normal.png')
      this.stopAudio()
    }
  }
  play2 = (e) => {
    e.preventDefault();
    if (this.state.status === 0) {
      this.stopAudio()
      // audio.currentTime = 0;
    }
    this.getUrl(this.props.url)
    let target = e.target || e.srcElement
    let that = this
    if (this.state.status === 0 || this.state.status === 2) {
      this.setState({
        status: 1
      })
      target.src=require('../../../images/tests/play2-animate1.png')
      setTimeout(()=>{
        target.src=require('../../../images/tests/play2-animate2.png')
      }, 500)
      setTimeout(()=>{
        target.src=require('../../../images/tests/play2-animate3.png')
      }, 1000)
      audio.play()
      audio.onended = function() {
        that.setState({
          status: 0
        })
        target.src=require('../../../images/tests/play2-normal.png')
      };
    } else if (this.state.status === 1) {
      this.setState({
        status: 2
      })
      target.src=require('../../../images/tests/pause2-normal.png')
      this.stopAudio()
    }
  }
  renderImg () {
    let msg;
    switch(this.props.type){
      case '1':
        msg = (<img className="video-answer" id="videoImg" onClick={this.play2} src={require('../../../images/tests/play2-normal.png')} alt="" /> )
        break;
      case '2':
        msg = (<img className="video-small" id="videoImg" onClick={this.play1} src={require('../../../images/tests/play1-normal.png')} alt="" /> )
        break;
      default:
        msg = (<img className="video-img" id="videoImg" onClick={this.play1} src={require('../../../images/tests/play1-normal.png')} alt="" />)
        break;
    }
    return msg;
  }
  render() {
    return (
      <div className={this.props.className}>
        {this.renderImg()}
      </div>
    )
  }
}
export default Video;